<template>
  <div>
    <!-- 视频播放页 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css" >
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-min.js"/>
    <!-- 阿里云视频播放器组件 -->
    <script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"/>
    <!-- 渲染 阿里云播放器的标签 -->
    <div id="J_prismPlayer"/>
  </div>
</template>
<script>
import vodApi from '~/api/vod'
export default {
  // 查询视频播放凭证
  async asyncData(ctx) {
    const vid = ctx.params.vid
    const playAuthRes = await vodApi.getAuth(vid)
    console.log(playAuthRes.data)
    return {
      playAuth: playAuthRes.data.playAuth,
      vid: vid
    }
  },
  // 初始化阿里云视频播放器播放视频
  mounted() {
    // 延迟执行播放器的初始化
    // setTimeout: 指定时间后执行回调函数
    // setInterval： 每隔一段时间执行一次回调函数
    setTimeout(() => {
      // eslint-disable-next-line no-undef
    /* var player =*/ new Aliplayer({
        id: 'J_prismPlayer',
        cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090807%2F14wz4a34j4e14wz4a34j4e.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661878200&t=3f235e6ddbe44470ab127511efb0a6d3', // 播放器默认视频封面图片地址
        // source: 'https://outin-a6105734031411eba24000163e024c6a.oss-cn-shanghai.aliyuncs.com/sv/154037ed-18247841c87/154037ed-18247841c87.mp4?Expires=1659061943&OSSAccessKeyId=LTAIwkKSLcUfI2u4&Signature=jONvPkjzDSsVXYtUbh5gxQOejQM%3D',//播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
        encryptType: 1, // 表示视频需要解密播放
        // 视频播放凭证必须是vid的播放凭证
        vid: this.vid, // 必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
        // 播放凭证包含了加密的视频播放地址信息+凭证过期时间信息
        playauth: this.playAuth // 必选参数。音视频播放凭证。
      // 注册组件库的组件设置给阿里云播放器使用

      }, function(player) {
        console.log('The player is created.')
      })
    }, 2000)// 2秒后执行回调函数
  }
}
</script>
